import 'package:flutter/material.dart';
import 'package:flutter_verification_box/verification_box.dart';
import 'package:get/get.dart';
import 'package:high_help_apps/common/utils/toast.dart';
import 'package:high_help_apps/common/values/colors.dart';
import 'package:high_help_apps/common/widgets/common/common_button.dart';
import 'package:high_help_apps/common/widgets/common/common_text_button.dart';
import 'package:high_help_apps/common/widgets/common/paper_tip.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'email_auth_logic.dart';
import 'email_auth_state.dart';

class EmailAuthPage extends StatefulWidget {
  @override
  _EmailAuthPageState createState() => _EmailAuthPageState();
}

class _EmailAuthPageState extends State<EmailAuthPage> {
  final EmailAuthLogic logic = Get.put(EmailAuthLogic());
  final EmailAuthState state = Get.find<EmailAuthLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildEmailAuthBody(),
    );
  }

  Widget _buildEmailAuthBody() => Column(
        children: [
          _buildPageHeader(),
          _buildEmailAuthBox(),
          _buildRefreshButton(),
        ],
      );

  Widget _buildPageHeader() => PageHeaderTip(
        title: '邮箱验证',
        subtitle: '请输入接收到的邮箱验证码',
        child: Image.asset('assets/images/auth/user_email.png'),
      );

  Widget _buildEmailAuthBox() => Container(
        margin: EdgeInsets.symmetric(vertical: 50.h),
        height: 45.h,
        child: VerificationBox(
            showCursor: true,
            cursorWidth: 1.25.w,
            count: 5,
            decoration: BoxDecoration(color: AppColors.inputBackground),
            textStyle: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
            cursorColor: AppColors.lightTextColor,
            borderColor: AppColors.lightTextColor2,
            focusBorderColor: AppColors.primaryElement,
            onSubmitted: (value) => logic.authEmail(value)),
      );

  Widget _buildRefreshButton() => Padding(
        padding: EdgeInsets.symmetric(vertical: 15.h, horizontal: 30.w),
        child: Obx(() => CommonButton(
            borderRadius: 5.r,
            child: Center(
              child: Text(
                logic.sendButtonText.value,
                style: TextStyle(
                    color: logic.isSend == true
                        ? AppColors.lightTextColor1
                        : Colors.white,
                    fontSize: logic.isSend == true ? 14.sp : 16.sp),
              ),
            ),
            border: logic.isSend == true
                ? Border.all(color: AppColors.subTextColor12, width: 2.r)
                : Border.all(color: AppColors.primaryElement, width: 0.5.r),
            backgroundColor:
                logic.isSend == false ? AppColors.primaryElement : Colors.white,
            onPressed: logic.clickSendButton)),
      );

  @override
  void dispose() {
    Get.delete<EmailAuthLogic>();
    super.dispose();
  }
}
